import {ScrollView} from 'react-native-gesture-handler';
import {Button, List, Toast, WhiteSpace, WingBlank, Flex} from '@ant-design/react-native';
import Item from '@ant-design/react-native/lib/list/ListItem';
import React, {Component} from 'react';
import {StyleSheet, Text, View, Image} from 'react-native';
import {getOwnerHouseList} from '~/api/owner';

export default class PersonalInformation extends Component {
    static navigationOptions = {
        title: '个人信息',
    };

    constructor(props) {
        super(props);
        this.state = {
            itemname: '周先生',
            itemTelephone: '13389630741',
            itemresidential: '华帝领域',
            itemHousenumber: '3-1-1',
            itemaddress: '合川区华帝街华帝领域32号',
            list: [],
        };
        getOwnerHouseList({
            page_index: 1,
            page_size: 10,
        }).then((r) => {
            if (r.code === 0) {
                this.setState({
                    list: r.data.list,
                });
            } else {
                Toast.info('失败', 1);
            }
        });
    }

    render() {
        return (
            <ScrollView style={styles.scrollview}>
                <WhiteSpace size="md"/>
                <WingBlank size='lg'>
                <View style={styles.buttonview}>
                <Image style={{ width: 50, height: 50, marginTop: 10}} source={require('~/assets/my/titlemesg.png')} />
                    <Text
                        style={{width: '50%', marginTop: '3%' ,fontSize: 18, marginLeft: 10, color: '#FF3733'}}
                        onPress={() => {
                            this.props.navigation.push('AddOwnerInformation');
                        }}>
                        添加业主信息
                    </Text>
                </View>
                {this.state.list.map((item, index) => {
                    return (
                        <List style={{marginTop: 10}}>
                            <Item>
                                <View style={styles.view}>
                                    <View
                                        style={{
                                            width: '100%',
                                            flexDirection: 'column',
                                        }}>
                                    <Flex>
                                        <View style={{width: '20%', justifyContent: 'center'}}>
                                            <Text>{item.HouseOwner}</Text>
                                        </View>
                                        <View>
                                            <Text style={{color: '#999999'}}>{item.Mobile}</Text>
                                        </View> 
                                    </Flex>
                                        <WhiteSpace size="md"/>
                                        <Flex direction={'row'}>
                                        <View style={{width: '80%', flexDirection: 'row'}}>
                                            <Text>小区：</Text>
                                           <Text style={{marginLeft: '7%'}}>{item.BuildingName}</Text>
                                        </View>
                                        <View>
                                            <Text>门牌：{item.HouseNo}</Text>
                                        </View> 
                                    </Flex>
                                        <WhiteSpace size="md"/>
                                        <Flex>
                                        <View style={{width: '110%', flexDirection: 'row'}}>
                                            <Text>住址：</Text>
                                            <Text style={{marginLeft: '6%'}}>{item.CityName}{item.BuildingName}</Text>
                                        </View>
                                    </Flex>
                                    </View>
                                        <WhiteSpace size="md"/>
                                        {/* <Flex>
                                        <View style={{width: 2, height: '60%', backgroundColor: '#666666',marginTop: '8%', marginLeft: 15}}></View>
                                       <Image style={{ width: 30, height: 30, marginTop: '15%', marginLeft: 15}} source={require('~/assets/my/xiugai.png')} />
                                       </Flex> */}
                                </View>
                            </Item>
                        </List>
                    );
                })}
                </WingBlank>
            </ScrollView>
        );
    }
}
const styles = StyleSheet.create({
    scrollview: {
        flex: 1,
    },
    textsize: {
        fontSize: 15,
    },
    view: {
        width: '90%',
        flexDirection: 'row',
    },
    buttonview: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
    },
    textview: {
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
});
